<template>
	<view>
		<!-- 生成海报的canvas -->
		<view class="my-canvas-box" @touchmove.stop.prevent :class="posterInfo.status ? 'show' : 'hide'"
			@click="posterInfo.status = false">
			<canvas class="my-canvas" canvas-id="myCanvas" @longpress.stop="saveSharePic"></canvas>
		</view>
		<view class="qrCode">
			<view class="titleCode">
				<text>下载ePumping易乓乒 APP</text>
				<text>体验“不一样”的工业服务</text>
			</view>

			<view class="modeCode" @click="clickCodeUrl(qrCodem.userQrCodeUrl)">
				<fileImage :src="qrCodem.userQrCodeUrl" :className="['casePhoto']" />
			</view>
			<!-- 分享 -->
			<!-- #ifdef APP-PLUS || H5  -->
			<view class="shareView" @click="generatePoster">
				<text>分{{' '}}享</text>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN   -->
			<view class="shareView">
				<button size="mini" type="default" @click="generatePoster">分{{' '}}享</button>
			</view>
			<!-- #endif -->
		</view>
		<!-- <Loading :loadingShow="loading"></Loading> -->
	</view>
</template>

<script>
	import Loading from '@/components/loading/loading.vue'
	import {
		baseMethod
	} from '@/config/method.js';
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		uniShareMethod
	} from '@/config/CurrentRouter.js'
	export default {
		components: {
			fileImage
		},
		data() {
			return {
				posterInfo: {
					status: false,
					loading: false // 加载中
				},
				qrCodem: {} //二维码推广

			}
		},
		onShow() {
			this.popularizeCode(); //推广二维码
		},
		onShareAppMessage(res) {},
		methods: {
			popularizeCode() {
				this.$http.post('api/user/GetCrCode').then(res => {
					this.qrCodem = res;
					console.log(this.qrCodem);
				})
			},
			// 查看二维码
			clickCodeUrl(userQrCodeUrl) {
				uni.previewImage({
					current: 0,
					urls: [userQrCodeUrl]
				})
			},
			// uniApp分享到微信
			appShare(Url) {
				console.log('Url-----', Url);
				uniShareMethod({
					showImg: true,
					share: {
						title: '易乓乒服务平台- 二维码推广',
						type: 2,
						imageUrl: Url,
					}
				}).then(res => {}).catch(err => {})
			},
			// 生成海报
			generatePoster() {
				console.log('121212');
				// 这里是创建 canvas 绘图上下文
				let context = uni.createCanvasContext('myCanvas');
				this.loading = false
				// 给整个canvas填充白色背景（这个如果不加上的话，在APP端生成的海报没有白色背景）
				context.setFillStyle('#ffffff');
				context.fillRect(0, 0, 500, 900);

				context.setFontSize(14);
				context.setFillStyle('#000000');
				context.fillText('下载ePumping易乓乒 APP', 40, 48);

				context.setFontSize(14);
				context.setFillStyle('#000000');
				context.fillText('体验“不一样”的工业服务', 100, 75);

				// 红色二维码
				uni.downloadFile({
					url: this.qrCodem.userQrCodeUrl,
					success: function(res) {
						context.drawImage(res.tempFilePath, 30, 100, 250, 250);
					}
				});
				// 绘制完成，让canvas显示【这里看自己项目，是否有loading动画】
				this.posterInfo.status = true;
				setTimeout(() => {
					context.draw();
					this.saveSharePic()
				}, 1500)

			},
			// 长按保存生成的海报
			saveSharePic() {
				setTimeout(() => {
					uni.canvasToTempFilePath({
						// 这里修改保存的图片格式
						canvasId: 'myCanvas',
						quality: 1,
						success: (res) => {
							if (res.errMsg == 'canvasToTempFilePath:ok') {
								// console.log('res-=-=--==--==', res.tempFilePath);
								this.$http.urlFileUpload("api/user/UploadCrCode", {
									files: [{
										path: res.tempFilePath
									}], // 必填 临时文件路径 格式: [{path: "图片地址"}]
									isPrompt: true, //（默认 true 说明：本接口抛出的错误是否提示）
									load: true, //（默认 true 说明：本接口是否提示加载动画）
									header: { //默认 无 说明：请求头
										'Content-Type': 'application/json'
									},
									isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用）
									maxSize: 40000000, //（默认 无 说明：上传的文件最大字节数限制，默认不限制）
									onEachUpdate: res => {
										console.log("单张上传成功返回：", res);
									},
									onProgressUpdate: res => {
										console.log("上传进度返回：", res);
									}
								}).then(res => {
									console.log("全部上传完返回结果：", res);
									// #ifdef APP-PLUS
									this.appShare(res) //分享到微信
									// #endif
									// #ifdef MP-WEIXIN
									wx.downloadFile({
										url: res[0],
										success: (res) => {
											wx.showShareImageMenu({
												path: res.tempFilePath
											})
										}
									})
									// #endif

								})
							}
						}

					});
				}, 100)
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #FFFFFF;
	}
</style>

<style lang="less" scoped>
	.qrCode {
		position: absolute;
		left: 0;
		right: 0;
		top: 40px;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 1440rpx;


		.titleCode {
			display: flex;
			flex-direction: center;
			justify-content: center;

			>text {
				font-weight: 700;
				font-size: 29rpx;
			}
			>text:nth-child(2) {
				margin-left: -180rpx;
				margin-top: 50rpx;
			}
		}
	}

	.modeCode {
		margin: auto;
		margin-top: 25px;
		width: 550rpx;
		height: 550rpx;
	}

	// 分享
	.shareView {
		margin: auto;
		margin-top: 160rpx;
		width: 85%;
		height: 80rpx;
		background-color: #b5001e;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
		color: #FFFFFF;
		border-radius: 8px;

		>button {
			width: 100%;
			font-size: 30rpx;
			color: #FFFFFF;
			background-color: #b5001e;
			text-align: center;
			line-height: 80rpx;
		}

		>button::after {
			border: none;
		}
	}


	.my-canvas-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 99;

		&.hide {
			display: none;
		}

		&.show {
			display: block;
		}

		.canvas-tip {
			color: #ffffff;
			font-size: 24rpx;
			margin-top: 30rpx;
			text-align: center;
		}


		.my-canvas {
			margin: auto;
			margin-top: 200rpx;
			width: 85%;
			height: 850rpx;
		}

	}
</style>
<style lang="scss">
	.casePhoto {
		width: 550rpx;
		height: 550rpx;
		border-radius: 7rpx;
	}
</style>